<template>
    <div>
        <!-- 计算属性案例 -->
        <p>
            <input type="text" v-model="firstname" placeholder="姓">
        </p>
        <p>
            <input type="text" v-model="lastname" placeholder="名">
        </p>
        <p>
            <input type="text" v-model="fullname" placeholder="姓名">
        </p>
        <button @click="clickFn">点击事件</button>
    </div>
</template>

<script>
// 123
// 456
export default {
    data() {
        return {
            firstname: '', // 姓
            lastname: '', // 名
            // fullname: ''  // 姓名
        }
    },
    computed: {
        // fullname() {
        //     // console.log('this-计算属性', this);
        //     console.log('计算');
        //     return this.firstname + this.lastname
        // }

        fullname: {
            get() {
                return this.firstname + this.lastname
            },
            set(val) {
                this.firstname = val.substr(0, 1);
                this.lastname = val.substr(1)
            }
        }
    },
    methods: {
        clickFn() {
            console.log(this);
        }
    }

}
</script>
<style scoped></style>